<template>
  <div class="w">
    <!-- 头部 -->
    <eleheader :title="title">
      <!-- 插槽左 -->
      <span slot="left" class="header_left">
        <!-- 图标 -->
        <van-icon name="search" @click.native="page" />
      </span>
      <!-- 插槽右 -->
      <span slot="right" class="header_right">
        <!-- 图标/或者登录注册 -->
        <van-icon
          name="contact"
          @click.native="$router.push({ path: '/profile' })"
        />
      </span>
    </eleheader>

    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      height:300px
    >
      <van-swipe-item>
        <ul class="Swipe">
          <li
            v-for="(item, value) in inFormaTion"
            :key="value"
            @click="idvlaue(260)"
          >
            <span>
              <img :src="url + item.image_url" />
            </span>
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul class="Swipe" indicator-color>
          <li
            v-for="(item, value) in informaShu"
            :key="value"
            @click="idLvlaue(item.id)"
          >
            <span>
              <img :src="url + item.image_url" />
            </span>
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>

    <!-- 附近商家 -->
    <div class="Nearbyshops">
      <div class="merchant">
        <div class="ds">
          <van-icon name="wap-home-o" />
          <span>附件商家</span>
        </div>
        <div
          class="blockLevel"
          v-for="tiem in listType"
          :key="tiem.id"
          @click="Tiao({ id: 3269 })"
        >
          <div class="lodexpt">
            <img :src="rsv + tiem.image_path" />
          </div>
          <div class="brandd">
            <div class="brand">
              <span class="textF">品牌</span>
              <span>{{ tiem.name }}</span>
              <span class="LookTicket">保准票</span>
            </div>
            <div class="valueText">
              <van-rate v-model="tiem.rating" :size="8" readonly allow-half />
              <span class="pingFong">{{ tiem.rating }}</span>
              <span class="sale"> 月售{{ tiem.recent_order_num }}单</span>
              <div class="shong">
                <span class="colorS">{{ tiem.delivery_mode.text }}</span>
                <span class="colorD">准时达</span>
              </div>
            </div>
            <div class="gongW">
              <span
                >${{ tiem.float_minimum_order_amount }}起送/{{
                  tiem.piecewise_agent_fee.tips
                }}</span
              >
              <span class="time color">{{ tiem.order_lead_time }}</span>
              <span class="time">{{ tiem.distance }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eleheader from "@/components/eleheader";
import elefooter from "@/components/elefooter";
//接口
import { indexentry, restaurants, geohash } from "../api/registerjk";
//
export default {
  components: { eleheader, elefooter },
  name: "index",
  data() {
    return {
      //轮播图
      inFormaTion: [],
      informaShu: [],
      url: "https://fuss10.elemecdn.com",
      //评分
      value: 3,
      //获取商铺列表
      listType: [],
      // 图片
      rsv: "//elm.cangdu.org/img/",
      //轮播图的id值
      id: [],
      //标题
      title: "",
    };
  },

  created() {
    let geohashw = this.$route.query.geohash;
    console.log(125, this.$route.query.geohash);

    geohash(geohashw).then((res) => {
      console.log("128", res);
      this.title = res.data.address;
    });

    //轮播图
    indexentry().then((res) => {
      console.log(113, res);
      this.inFormaTion = res.data.slice(0, 8);
      this.informaShu = res.data.slice(8);
    });
    //获取商铺列表
    restaurants({
      latitude: 31.38098, //纬度
      longitude: 121.50146, //经度
    }).then((res) => {
      console.log(122, res);
      this.listType = res.data;
    });
  },
  //第一波轮播
  methods: {
    page() {
      this.$router.push({
        path: "/search",
      });
    },
    Tiao(id) {
      this.$router.push({
        path: "/goodsmenu",
        query: {
          obj: JSON.stringify(id),
        },
      });
    },

    idvlaue(id) {
      console.log(id);
      this.$router.push({
        path: "/goodTypeList",
        query: { id },
      });
      this.id = id;
    },
    //第二波轮播
    idLvlaue(id) {
      this.$router.push({
        path: "/goodTypeList",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header_left,
.header_right {
  padding: 0 20px;
  flex: 1;
}
.header_left {
  .van-icon {
    float: left;
    line-height: 45px;
  }
}
.header_right {
  .van-icon {
    float: right;
    line-height: 45px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.Swipe {
  display: flex;
  flex-wrap: wrap;
  // background-color: rgb(255, 255, 255);
  li {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      justify-content: center;
      width: 70%;
      height: 70%;
      text-align: center;
      img {
        padding: 20px;
        width: 50px;
        // height: 100%;
      }
    }
    p {
      color: black;
      width: 100%;
      height: 40%;
      text-align: center;
      margin: 0px;
      line-height: 26px;
      font-size: 14px;
      color: rgb(167, 165, 165);
    }
  }
}
/deep/.van-swipe__indicators {
  background-color: rgb(236, 13, 13);
  border-radius: 10px;
}
/deep/.my-swipe .van-swipe-item[data-v-a83bd3b0] {
  line-height: 0px;
}
.Nearbyshops {
  margin-top: 25px;
  padding-left: 8px;
  // padding-bottom: 9px;
  .blockLevel {
    display: flex;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px #999 solid;
  }
  .LookTicket {
    float: right;
    margin: 0px;
    font-size: 10px;
  }
  .brandd {
    width: 80%;

    .gongW {
      font-size: 10px;
      margin-top: 11px;
      .time {
        float: right;
      }
      .color {
        color: blue;
      }
    }

    .valueText {
      margin-top: 11px;
      .pingFong {
        margin-left: 10px;
        color: goldenrod;
        font-size: 10px;
      }
      .sale {
        font-size: 10px;
        margin-left: 6px;
      }
      .colorS {
        background-color: blue;
        color: ivory;
        border-radius: 2px;
      }
      .colorD {
        border: 1px solid blue;
        color: blue;
      }
      .shong {
        float: right;
        font-size: 10px;
      }
    }

    .brand {
      // width: 80%;
      // padding-right: 20px;
      .textF {
        font-weight: 700;
        margin-right: 5px;
        background-color: gold;
      }
    }
  }

  .van-icon {
    margin-right: 10px;
    margin-top: 5px;
  }
  .ds {
    margin-bottom: 20px;
  }

  .lodexpt {
    width: 4.7rem;
    height: 4.7rem;
    display: block;
    margin-right: 0.4rem;
    background-color: aqua;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>